<template>
  <div>
    <!-- 整个色系  #804f22 -->
    <header>
      <div class="h_top">
        <div class="h_left">
          嗨，欢迎来到订花乐！
          <span>
            <img src="../assets/weichat.svg" alt="">
            关注微信
            <!-- <img src="../assets/erwei.jpeg" alt="" class="hidden"> -->
          </span>
        </div>
        <div class="h_right">
          <span v-if="!ph">
          <router-link to="/login">你好，请登录</router-link>
          <router-link to="/register" class="reg_co">免费注册</router-link>
          </span>
          <span v-else>
            <a href="#">欢迎你：{{ph}}</a>
            <a href="/index" @click="destroy">退出</a>
          </span>
          <span class="line"></span>
          <a href="#">订单查询</a>
          <span class="line"></span>
          <a href="/car">
            <img src="../assets/car.svg" alt="">
            <span>购物车</span>
            <span>({{count}})</span>
          </a>
          <span class="line"></span>
          <a href="#">手机下单</a>
        </div>
      </div>
      <div class="h_bottom">
        <div class="search">
          <div class="logo">
              <a href="/index">
                <img src="../assets/logo1.png" alt="">
              </a>
          </div>
        </div>
        <div class="search_r">
          <img src="../assets/phone.svg" alt="">
          <span>400-060-1520</span>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ph: ''
      }
    },
    mounted () {
      this.ph=JSON.parse(sessionStorage.getItem('ph'))
    },
    computed:{
      count(){
        let count=JSON.parse(localStorage.getItem('carItems'))
        return count?count.length:0
      }
    },
    methods: {
      destroy() {
        sessionStorage.removeItem('ph')
      }
    },
  }
</script>

<style lang="scss" scoped>
header{
  color: #999;
  font-size: 14px;
  // 顶部
  .h_top{
    height: 32px;
    background-color: #f2f2f2;
    padding: 6px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .h_right{
      .line{
        display: inline-block;
        width: 1px;
        height: 10px;
        background-color: #999;
        margin: 0 16px;
      }
      a{
        text-decoration: none;
        color: #999;
        margin-left: 10px;
      }
      >a>img{
        margin-right: 10px;
      }
      >a>span+span{
        margin-left: 5px;
        color: #804f22;
      }
      .reg_co{
        color: rgb(136,78,34);
      }
    }
  }
  // 搜索一栏
  .h_bottom{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    .search{
      .logo{
        a{
          img{
            width: 170px;
          }
        }
      }
    }
    .search_r{
        >img{
          margin-right: 5px;
        }
      }
  }
}
</style>